Web Page Design for Designers

 

 

 

The first clue that a web page

has been designed on a

PC is that it will look too wide

on a Macintosh screen!

One of the first things that needs to be considered is the page size that we are going to work on. On paper, we work to A4 or Tabloid or 48 Sheet poster format knowing that the size is going to stay constant.

Not so with a web page!

We do know that a web page will be within certain height and width limits. The smallest it is likely to be is governed by the standard monitor size of 640 by 480 pixels. On a Windows PC, the browser window will make use of the full width of the screen by default. On a Macintosh, it will usually be slightly narrower so as not to hide the row of icons down the right hand side of the screen.

With the growing popularity of larger screens - 800 x 600, 1024 x 768 and more, oversized web pages can, and do, become unreadable on smaller monitors. The graphics, which are a fixed size, can be too wide to fit and the text just word wraps to the browser's width making ridiculously long, unreadable lines.

For the optimal cross-platform web page, it is a good idea to design to a minimum width of the Macintosh default of around 470 pixels and a maximum of 625 wide to accommodate people who have standard 14" VGA monitors. Even at the minimum size, it is desirable from a 'readability' point of view, to limit the text line width to 8-10 words.

webruler

This Web Ruler shows the
correlation between inches,
centimetres and pixels on the
96 dpi based system used
on most PCs and the 72 dpi
system used on Macintosh
computers.

The pixel measurements are
the same because pixels
are absolute and determined
by the computer display
system. The Mac inches and
centimetres are approximately
life size (on a 640 x 480
14" monitor) whereas the PC
scales are 1.3 times bigger.

Download this ruler
and a smaller pixel only
version for your own
web page measurements.
Mac .sit   PC .zip

For screen-based work, only the pixel measurements are significant. The difference is only apparent in the specification of type sizes and on printed hard copy.

The blue line shows the minimum page width likely to be encountered, and the green extension the maximum when a browser is stretched to full width on a 640 x 480 monitor. People with larger monitors may stretch their windows to more than this, into the red area, but designing web pages to these widths will cause problems on smaller monitors. Download this ruler for your own use or use the smaller 'pixel bar'.

In a multi-column layout, the column height needs to be considered too. Each column should fit comfortably into the viewable height of the screen. The reader shouldn't have to scroll a page up and down to go from one column to the next. Again the height is determined by the minimum default browser height, which is about 400 pixels regardless of computer type. The maximum page length is less easily arrived at. In theory, it can be any length but long pages take a long time to download and need a lot of scrolling to navigate. It is better to have multiple short pages than a few very long ones.

 

menunext